<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">
  <title></title>
  <style>
    ul {
      list-style: none;
    }

    li {
      padding: 20px;
      float: left;
      border: 1px solid #dddddd;
    }

    /* li>div {
      pointer-events: none;
    }

    li h1 {
      pointer-events: none;
    } */
  </style>
</head>

<body>

  <div id="div1">
    <ul>
      <li class="aa bb c-c__c">
        <div>
          <h1>我是红色</h1>
        </div>
      </li>
      <li class="aa bb c-c__c">
        <div>
          <h1>我是黄色</h1>
        </div>
      </li>
      <li class="aa bb c-c__c">
        <div>
          <h1>我是绿色</h1>
        </div>
      </li>
    </ul>
  </div>

  <script>
    // var el = document.getElementById('div1');

    // el.addEventListener('click', function () {
    //   var e = e || window.event;
    //   //IE没有e.target，有e.srcElement
    //   var target = e.target || e.srcElement;
    //   //判断事件目标是否是td，是的话target即为目标节点td
    //   console.log('getNode:', getNode(target));
    // });

    // function getNode(node) {

    //   console.log(node.tagName);
    //   if (node.nodeName === 'LI') {
    //     return node;
    //   } else {
    //     return getNode(node.parentNode);
    //   }
    // }
  </script>
  <script>
    bindEvent(div1);

    function bindEvent(el, cb) {
      el.addEventListener('click', function () {
        var e = e || window.event;
        var target = e.target || e.srcElement;

        // var klass = target.className.replace(/\s+/ig, ',');
        var klass = target.className.split(/\s+/g);

        // console.log(target);
        // console.log(klass);
        // console.log(klass.indexOf('cc'));


        // console.log(getNode(target, 'li', 1));
        console.log(getNode(target, 'c-c__c', 2));
      });
    }

    function getNode(node, rule, key) {
      console.log('getNode:', { node, rule, key });
      switch (key) {
        case 1: {
          console.log(key);

          console.log('node.nodeName:', node.nodeName);
          console.log('node.nodeName.toLowerCase:', node.nodeName.toLowerCase());

          if (node.nodeName.toLowerCase() === rule) {
            return node;
          } else {
            return getNode(node.parentNode, rule, key);
          }
          break;
        }

        case 2: {
          console.log(key);
          var klass = node.className.split(/\s+/g);
          if (klass.indexOf(rule) > -1) {
            return node;
          } else {
            return getNode(node.parentNode, rule, key);
          }
          break;
        }

        default:
          break;
      }

    }


   /*  (
      function (global, factory) {
        "use strict";
        if (typeof module === "object" && typeof module.exports === "object") {
          module.exports = factory(global, true);
        } else {
          factory(global);
        }
      }(typeof window !== "undefined" ? window : this, function (win, bool) {

      })
    ); */
  </script>


  <script>

    // /**
    //     * 委托事件绑定方法
    //     * @params parent 委托父元素的css选择符 tag id class
    //     * @params eventsName 绑定的事件
    //     * @params child 绑定事件的元素css选择符 tag id class
    //     * @params callback 事件响应函数
    //     */
    // function on(parent, eventsName, child, callback) {
    //   var parentNodes = document.querySelectorAll(parent);
    //   var len = parentNodes.length;
    //   var targetType = getType(child);
    //   if (len === 0) {
    //     return;
    //   }

    //   for (var i = 0; i < len; i++) {
    //     parentNodes[i].addEventListener(eventsName, addListener, false);
    //   }

    //   // 绑定事件方法
    //   function addListener(event) {
    //     if (getActName(targetType, event) === child.toLowerCase()) {
    //       callback(event);
    //     }
    //   }

    //   // 获取目标元素类型方法
    //   function getType(target) {
    //     var type;
    //     if (target.indexOf(".") !== -1) {
    //       type = "className";
    //     } else if (target.indexOf("#") !== -1) {
    //       type = "id";
    //     } else {
    //       type = "tagName";
    //     }
    //     return type;
    //   }

    //   // 获取目标元素完整名称方法
    //   function getActName(type, event) {
    //     var name,
    //       lower = event.target[type].toLowerCase();
    //     if (type === "className") {
    //       name = ".";
    //     } else if (type === "id") {
    //       name = "#";
    //     } else {
    //       name = "";
    //     }
    //     return name + lower;
    //   }
    // }
  </script>
</body>

</html>